<template>
  <div>
    <el-container style="height: 920px; border: 1px solid #eee;margin-top: 0px;">
      <!--左 start-->
      <el-aside width="190px" style="background-color: #545c64">

        <el-menu router default-active="this.$route.path" class="el-menu-vertical-demo"
                 @open="handleOpen" @close="handleClose" @select="handleSelect"
                 background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
                 style="text-align: left">

          <el-menu-item index="/workbench"  style="margin-top: 70px;">
            <i class="el-icon-setting"></i>
            <span slot="title">工作台</span>
          </el-menu-item>
          <el-menu-item index="/registration">
            <i class="el-icon-setting"></i>
            <span slot="title">挂号</span>
          </el-menu-item>
          <el-menu-item index="/newtreat">
            <i class="el-icon-setting"></i>
            <span slot="title">新开就诊</span>
          </el-menu-item>
          <el-menu-item index="/retail">
            <i class="el-icon-setting"></i>
            <span slot="title">药品零售</span>
          </el-menu-item>
          <el-menu-item index="/charge">
            <i class="el-icon-setting"></i>
            <span slot="title">收费管理</span>
          </el-menu-item>
          <el-menu-item index="/demo">
            <i class="el-icon-setting"></i>
            <span slot="title">Demo</span>
          </el-menu-item>

        </el-menu>

      </el-aside>
      <!--左 end-->
      <!--右 start-->
      <el-container>
        <el-header style="text-align: left;padding-left: 40px;font-size: 30px;">
          <strong>{{header}}</strong>
        </el-header>

        <el-main>
          <router-view></router-view>
        </el-main>

        <el-footer style="height: 5px;"></el-footer>
      </el-container>
    </el-container>
    <!--右 end-->
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        header:'Header'
      }
    },
    methods: {
      /*导航菜单*/
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
        //alert("zhy="+key);
        if (key == "/workbench") {
          this.header="工作台";
        }
        else if (key == "/registration") {
          this.header="挂号";
        }
        else if (key == "/newtreat") {
          this.header="新开就诊";
        }
        else if (key == "/retail") {
          this.header="药品零售";
        }
        else if (key == "/charge") {
          this.header="收费管理";
        }
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    mounted(){
    }
  };
</script>

<style scoped>
  /*布局容器的样式*/
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  body > .el-container {
    margin-bottom: 40px;
  }
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>

